<template>
	<view>
		<swiper class="syswiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			:circular="true">
			<swiper-item>
				<image src="https://img0.baidu.com/it/u=517931815,1911610925&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=466"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://img0.baidu.com/it/u=445275692,2995647103&fm=253&fmt=auto&app=120&f=JPEG?w=900&h=506"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://img0.baidu.com/it/u=959337245,3894594516&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=459"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://img2.baidu.com/it/u=387111071,3469495125&fm=253&fmt=auto&app=138&f=JPEG?w=704&h=500"></image>
			</swiper-item>
		</swiper>
		<view class="syystem">
			<view v-for="(item,index) in sysitem" :key="index" @click="tzfn(item.url)">
				<view :class="item.class"></view>
				<text>{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {ref,reactive,toRefs} from 'vue'
	export default {
		setup(){
			let data=reactive({
				sysitem:[
				{class:'t-icon t-icon-renjunrishenghuoyongshuiliang30',text:'用水户信息',url:'/pages/slsy/slyshxx'},
				{class:'t-icon t-icon-yongshuigongsi',text:'取用水统计',url:'/pages/slsy/qys'},
				{class:'t-icon t-icon-yongshuiyujing',text:'预警提醒',url:'/pages/slsy/yjtx'},
				{class:'t-icon t-icon-jieshuiguanlibeifen',text:'节水三同时',url:'/pages/slsy/jsts'},
				{class:'t-icon t-icon-richangjiandu',text:'日常监管',url:'/pages/shuiliju/richangjianguan'},
				{class:'t-icon t-icon-shoufeiguanli',text:'收费管理',url:'/pages/shuiliju/shoufeiguanli'},
				{class:'t-icon t-icon-richangjiancha',text:'日常检查',url:'/pages/shuiliju/richangjiance'}
				],
				tzfn:(ev)=>{
					uni.navigateTo({
						url:ev
					})
				}
			})
			return  {...toRefs(data)  };
		}
	}
</script>

<style lang="scss" scoped>
	@import url("~@/static/xzafont/iconfont/iconfont.css");
	.syswiper {
		width: 750rpx;
		height: 420rpx;
	}

	.syystem {
		display: flex;
		flex-wrap: wrap;
		&>view {
			width: 250rpx;
			color: #666666;
			height: 203rpx;
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border: 1px solid #E4E4E4;
		}
	}
	swiper image{
			width: 750rpx;
			height: 420rpx;
		}
</style>
